<template>
    <div style="display: flex;">
        <div style="width:200px">
            <div>选中的行：{{ selectName }}</div>
            <div>多选的行：{{ checkedName }}</div>

        </div>
        <JList 
        style="width: calc( 100% - 200px);height: 100%;" 
        :data="datalist" 
        :showCheckBox="true" 
        :showIndex="true" 
        :columns="columns"
        @selectChanged="selectChange"
        @checkChanged="checkChange"
        ></JList>

    </div>
</template>

<script>
import JList from './JList.vue'
export default {
    data(){
        return {
            datalist:[],
            columns:[{
                title: "姓名",
                key: "name",
                width: "100px"
            },
            {
                title: "年龄",
                key: "age",
                width: "30%",
                editable:true
            },
            {
                title: "性别",
                key: "sex",
                type: 'select',
                width: "50px",
                options:[
                    {
                        label:"男",
                        value:"男"
                    },
                    {
                        label:"女",
                        value:"女"
                    }
                ],
                editable:true
            },
            {
                title: "职务",
                key: "position",
            },
            ],            
            selectName:"",
            checkedName:""
        }
    },
    components:{
        JList
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            this.datalist.push({
                name:"王二蛋",
                age:21,
                sex:"男"
            });
            this.datalist.push({
                name:"赵  四",
                age:28,
                sex:"男"
            });
            this.datalist.push({
                name:"张小花",
                age: 19,
                sex:"女"
            });
            this.datalist.push({
                name:"闫九僧",
                age:43,
                sex:"男"
            });
        },
        selectChange(selectedItems){
            let names="";
            selectedItems.forEach(element => {
                names += element.name;
            });
            this.selectName = names;
        },
        checkChange(checkedItems){
            let names="";
            checkedItems.forEach(element => {
                names += element.name;
            });
            this.checkedName = names;
        }
    }

}
</script>

<style>

</style>